
.container{
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  background: url("@/assets/images/Background_image.jpeg") no-repeat;
  background-size: 100% 100%;

  padding: 20px; 

  color:aliceblue;
  .login-container {  
    width: 300px;  
    margin: 100px auto;  
    padding: 20px; 
    border-radius: 8px;  
  
    box-shadow: 0 0 10px rgba(12, 122, 220, 0.5);  
    background-color: rgba(22, 11, 81, 0.5);  
    animation: fadeIn 0.5s ease-out;  
  
  }
  .form-item {  
    margin-bottom: 15px;
    #username{
      width: 90%;
      height: 20px;
      border-radius: 20px;
      background: none;
      border: 1px rgba(22, 249, 254, 1) solid;
      color: aliceblue;
      padding-left: 20px;
    }
     
    #password{
      width: 90%;
      height: 20px;
      border-radius: 20px;
      background: none;
      border: 1px rgba(22, 249, 254, 1) solid;
      color: aliceblue;
      padding-left: 20px;
    }  
  }  
    
  .form-item label {  
    display: block;  
    margin-bottom: 5px;  
  }
  .login-button {  
    width: 100%;  
    padding: 10px;  
    background-color: #409EFF;  
    color: white;  
    border: none;  
    border-radius: 5px;  
    cursor: pointer;  
    transition: background-color 0.3s;  
  }  
    
  .login-button:hover {  
    background-color: #66b1ff;  
  }    
}  

  
@keyframes fadeIn {  
  from { opacity: 0; transform: translateY(20px); }  
  to { opacity: 1; transform: translateY(0); }  
}  
  

  

